<template>
	<view>
		<view>
			<view style="background-color: white;padding:20rpx;padding-bottom: 0;">
				<u-search inputAlign="center" placeholder="客户姓名/手机号/车牌号/订单编号" @search="data=[];form.page=1;getData()"
					@click="data=[];getData()" v-model="form.text" :showAction="false"></u-search>
			</view>
			<view style="background-color: white;">
				<u-dropdown>
					<u-dropdown-item v-model="form.deposit_state" title="押金状态"
						:options="[{label:'待缴纳',value:1},{label:'进行中',value:2},{label:'扣款中',value:3},{label:'已结束',value:4},{label:'全部',value:''}]"
						@change="form.page=1;data=[];getData()"></u-dropdown-item>
					<u-dropdown-item v-model="form.deposit_pay_type" title="缴纳方式"
						:options="[{label:'支付宝芝麻信用预授权',value:1},{label:'信用卡预授权',value:2}]"
						@change="form.page=1;data=[];getData()"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<view style="">
			<u-card box-shadow="5rpx 5rpx 10rpx #c8c9cc"  :body-style="{padding:'10rpx 30rpx'}"
				 v-for="(item,idx) in data">
				<view slot="head" style="display: flex;justify-content: space-between;">
					<view v-if="item.car_num">
						<span>{{item.car_num}}</span>
						<span v-if="item.deposit_pay_datetime&&item.deposit_state<4">
							<u-tag style="margin-left: 10rpx;" v-if="calculateRemainingDays(item.deposit_pay_datetime,item.deposit_back_term)>=0"  :text="'剩'+calculateRemainingDays(item.deposit_pay_datetime,item.deposit_back_term)+'天'" mode="dark" />
							<u-tag style="margin-left: 10rpx;" v-if="calculateRemainingDays(item.deposit_pay_datetime,item.deposit_back_term)<0" :text="'超过'+(calculateRemainingDays(item.deposit_pay_datetime,item.deposit_back_term)*-1)+'天'" mode="dark" type="error"/>
						</span>
					</view>
					<view v-if="item.deposit_pay_datetime">
						{{$u.timeFormat(item.deposit_pay_datetime, 'yyyy-mm-dd hh:MM')}}
					</view>
				</view>
				<view class="" slot="body">
					<view class="myCellGroup">
						<view v-if="item.order_num">
							<view>订单编号</view>
							<view>{{item.order_num}}</view>
						</view>
						<view v-if="item.deposit_back_term">
							<view>退还期限</view>
							<view>{{item.deposit_back_term}}天</view>
						</view>
						<view v-if="item.custom_name">
							<view>客户姓名</view>
							<view>{{item.custom_name}}</view>
						</view>
						<view v-if="item.custom_tel">
							<view>手机号</view>
							<view v-if="item.custom_tel">{{item.custom_tel}}</view>
						</view>
						<view v-if="parseFloat(item.deposit_amont).toFixed(2)>0">
							<view>押金金额</view>
							<view>{{item.deposit_amont}}</view>
						</view>
						<view v-if="parseFloat(item.deposit_pay_amont).toFixed(2)>0">
							<view>授权金额</view>
							<view>{{item.deposit_pay_amont}}</view>
						</view>
						<view v-if="parseFloat(item.deposit_total_back_amont).toFixed(2)>0">
							<view>退还金额</view>
							<view>{{item.deposit_total_back_amont}}</view>
						</view>
						<view v-if="parseFloat(item.cur_pay_blance_amont).toFixed(2)>0">
							<view>授权余额</view>
							<view>{{item.cur_pay_blance_amont}}</view>
						</view>
						<view v-if="parseFloat(item.active_blance_amont).toFixed(2)>0">
							<view>可用余额</view>
							<view>{{item.active_blance_amont}}</view>
						</view>
						<view v-if="parseFloat(item.deposit_deduction_amont).toFixed(2)>0">
							<view>扣款金额</view>
							<view>{{item.deposit_deduction_amont}}</view>
						</view>
						<view v-if="parseFloat(item.deduction_request_amont).toFixed(2)>0">
							<view>扣款中金额</view>
							<view>{{item.deduction_request_amont}}</view>
						</view>
						<view>
							<view>缴纳方式</view>
							<view>
								<text v-if="item.deposit_pay_type==1">支付宝芝麻信用预授权</text>
								<text v-if="item.deposit_pay_type==2">信用卡预授权</text>
							</view>
						</view>
						<view>
							<view>押金状态</view>
							<view>
								<text v-if="item.deposit_state==1">待缴纳</text>
								<text v-if="item.deposit_state==2">进行中</text>
								<text v-if="item.deposit_state==3">扣款中</text>
								<text v-if="item.deposit_state==4">已结束</text>
							</view>
						</view>
						<view v-if="item.car_type_name">
							<view>车型名称</view>
							<view>{{item.car_type_name}}</view>
						</view>
					</view>
				</view>
				<view class="" slot="foot">
					<view style="display: flex;justify-content: flex-end;gap: 20rpx;">
						<u-button v-if="item.deposit_pay_type==1&&item.deposit_state==1" type="success"  size="mini" @click="depositQrCodeShowPage(item.deposit_pay_id)">扫码授权</u-button>
						<u-button v-if="item.deposit_pay_type!=1&&item.deposit_state==2" type="primary" size="mini">退还</u-button>
						<u-button v-if="item.deposit_pay_type==1&&item.deposit_state==2" type="warning" size="mini" @click="depositDeductionReuestPage(item)">申请扣款</u-button>
						<u-button v-if="item.deposit_pay_type!=1&&item.deposit_state==2" type="warning" size="mini" @click="depositDeductionPage(item)">扣款</u-button>
						<u-button v-if="item.deposit_pay_type==1&&item.deposit_state==2" type="info" size="mini" @click="toDepositPayBack(item)">解冻</u-button>
						<u-button v-if="item.deposit_pay_type==1&&item.deposit_state==1" type="error" size="mini" @click="deleteItem(item.deposit_pay_id)">删除</u-button>
						<u-button v-if="!item.order_num" type="primary" size="mini" @click="selectOrders(item.deposit_pay_id)">关联订单</u-button>
						<u-button v-if="!item.order_num" type="primary" size="mini" @click="addOrders(item)">添加订单</u-button>
					</view>
				</view>
			</u-card>
		</view>
		<u-toast ref="uToast"></u-toast>
		<myModal ref="myModal"></myModal>
	</view>
</template>

<script>
	import dateUtils from '../../utils/dateUtils.js'
	export default {
		data() {
			return {
				count: 0,
				refresher: false,
				form: {
					text: '',
					page: 1,
					limit: 20,
					deposit_state: '',
					deposit_state_list:[1,2,3,4]
				},
				data: []
			}
		},
		mounted() {
			var that = this;
			this.getData();
			uni.$on('getDepositPayList', function(data) {
				that.form.page = 1;
				that.data = [];
				that.getData();
			})
		},
		onPullDownRefresh() {
			this.refresherpulling();
		},
		onReachBottom() {
			console.log(this.count);
			if (this.count == 0) {
				this.$refs.uToast.show({
					title: '到底啦',
					type: "warning"
				});
				return;
			}
			this.scrolltolower();
		},
		methods: {
			addOrders(item){
				uni.navigateTo({
					url:'/pages/addOrder/addOrder?deposit_pay='+encodeURIComponent(JSON.stringify(item))
				})
			},
			deleteItem(deposit_pay_id) {
				var that = this;
				that.$http.get('/depositPay/deleteById?deposit_pay_id=' + deposit_pay_id, {}, (res) => {
					if (res.data.success) {
						that.refresherpulling();
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			depositDeductionPage(item){
				uni.navigateTo({
					url:'/pages/depositDeduction/depositDeduction?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			depositDeductionReuestPage(item){
				uni.navigateTo({
					url:'/pages/depositDeductionReuest/depositDeductionReuest?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			depositQrCodeShowPage(deposit_pay_id){
				uni.navigateTo({
					url:'/pages/depositQrCodeShow/depositQrCodeShow?deposit_pay_id='+deposit_pay_id
				})
			},
			toUpdatePage(item) {
				uni.navigateTo({
					url: '/pages/customUpdate/customUpdate?custom=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			toDepositPayBack(item) {
				uni.navigateTo({
					url: '/pages/depositUnfreeze/depositUnfreeze?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			selectOrders(deposit_pay_id){
				uni.navigateTo({
					url:'/pages/selectOrders/selectOrders?deposit_pay_id='+deposit_pay_id
				})
			},
			getData() {
				var that = this;
				that.$http.post('/depositPay/ListByEntity', that.form, (res) => {
					that.refresher = true;
					uni.stopPullDownRefresh();
					if (res.data.success) {
						that.data = that.data.concat(res.data.result.list);
						that.count = res.data.result.list.length;
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			refresherpulling(e) {
				this.form.page = 1;
				this.refresher = true;
				this.data = [];
				this.getData();
			},
			scrolltolower(e) {
				this.form.page++;
				this.getData();
			},
			strToFormat(strDate) {
				return dateUtils.strToFormat(strDate);
			},
			strDateToTime2(take_date, return_date) {
				return dateUtils.strDateToTime2(take_date, return_date);
			},
			calculateRemainingDays(deposit_pay_datetime,deposit_back_term){
				if(!deposit_pay_datetime||!deposit_back_term){
					return'';
				}
				return dateUtils.calculateRemainingDays(deposit_pay_datetime, deposit_back_term);				
			}
		}
	}
</script>

<style>
	.myCellGroup {
		/* border: solid red 1px; */
	}

	.myCellGroup>view {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;
		border-bottom: solid #F8F8F8 1px;
	}

	page {
		/* background-color: white; */
	}
</style>